<template>
	<view class="window-top">
		<view class="window-flex">
			<view class="window-box">
				<scroll-view class="window-scroll" :scroll-y="false">
					<view v-if="tmpData" style="height: 100%; display: flex;flex-direction: column;">
						<view class="malltHeadBatten">
							<!-- 顶部占位 -->
							<view :style="'height:' + sConf.tH + 'px;'"> </view>
							<!-- 主标签 -->
							<view style="width: 100%;display: flex;flex-direction: column; padding: 10px;">
								<view
									style="width: 100%;display: flex;justify-content: center;align-items: center;gap: 20px;padding: 10px;">
									<view style="position: relative;">
										<tn-avatar :url="sConf.pics + tmpData.face" style="padding: 5px;" size="lg"
											shape="circle" shadow shadow-color="tn-shadow-lg">
										</tn-avatar>
										<tn-icon v-if="tmpData.gender == 0" name="girl" size="48" color="#ff007f"
											style="position: absolute;bottom: 0;right: 0;"></tn-icon>
										<tn-icon v-if="tmpData.gender == 1" name="boy" size="48" color="#007aff"
											style="position: absolute;bottom: 0;right: 0;"></tn-icon>
									</view>
									<view>
										<view style="color: #fff;font-size: large;">{{ tmpData.nicename }}</view>
										<view style="color: #888;">{{ zipStr(tmpData.phone) }}</view>
									</view>
									<view style="display: flex;flex-direction: column;align-items: center;">
										<tn-icon :name="tmpData.level.icon" :color="tmpData.level.color"
											size="64"></tn-icon>
										<view :style="'color:' + tmpData.level.color + ';'" style="font-size: small;">
											{{ tmpData.level.name }}
										</view>
									</view>
								</view>
								<view style="width: 100%;display: flex;justify-content: center;">
									<view style="background-color: #f1f1f1;padding: 10px;border-radius: 5px;">
										{{ tmpData.desc }}
									</view>
								</view>
								<view class="card coral"
									style="width: 100%;display: flex;justify-content: center;padding: 10px;margin: 10px 0;">
									<view style="display: flex;flex-direction: column;align-items: center;width: 50%;">
										<view>团队业绩</view>
										<view style="font-size: larger;">
											{{ (tmpData.expers.amount / 100 / 1000).toFixed(2) }}k
										</view>
									</view>
									<view style="display: flex;flex-direction: column;align-items: center;width: 50%;">
										<view>团队规模</view>
										<view style="font-size: larger;">{{ tmpData.scope ?? 0 }}</view>
									</view>
								</view>
								<view style="background-color: #fff;border-radius: 5px;padding: 10px;">
									<view
										style="display: flex;justify-content: space-between;align-items: center;padding: 10px 0; border-bottom: #888 1px solid;">
										<view style="color: #888;">生日</view>
										<view>{{ tmpData.birthday }}</view>
									</view>
									<view
										style="display: flex;justify-content: space-between;align-items: center;padding: 10px 0; border-bottom: #888 1px solid;">
										<view style="color: #888;">电邮</view>
										<view>{{ tmpData.email }}</view>
									</view>
									<view
										style="display: flex;justify-content: space-between;align-items: center;padding: 10px 0; ">
										<view style="color: #888;">注册时间</view>
										<view>{{ tmpData.created }}</view>
									</view>
								</view>
								<view
									style="display: flex;justify-content: space-around;align-items: center;padding: 10px;margin-top: 5px;">
									<button class="card mint" @click="addreStaff">关注好友</button>
									<button class="card berry" :disabled="staff.parent ? true : false"
										@click="bindParent">绑定用户</button>
								</view>
							</view>
						</view>
						<!-- 成长列表 -->
						<scroll-view class="selfScrollBlock" scroll-y>
							<view style="width: 100%;height: 280px;">
								<qiun-data-charts type="area" :opts="chartOpts" :chartData="chartData" />
							</view>
						</scroll-view>
						<!-- 顶部自定义导航 -->
						<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff"> {{ title }}
						</tn-navbar>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import utils from '@/common/utils';
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
export default {
	data() {
		return {
			topH: 0,
			title: '发现用户',
			sConf: getApp().globalData,
			staff: null, // 个人信息
			tmpData: null, // 用户信息
			expData: [], // 经验列表
			chartData: {}, // charts数据
			chartOpts: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
					"#ea7ccc"
				],
				padding: [15, 15, 0, 15],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					area: {
						type: "curve",
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: true,
						activeType: "hollow"
					}
				}
			}
		}
	},
	onLoad(options) {
		const sid = Number(options.sid || 0);
		console.log('onLoad', sid);
		this.loadSelfInfoRead(this.sConf.auth.id)
		this.loadSelfInfoRead(sid)
		this.loadSelfExpersList(sid)
		// this.designLayout()
	},
	onReady() {
		console.log('onReady');
		// setTimeout(() => {
		// 	this.designLayout()
		// }, 2000)
	},
	components: {
		qiunDataCharts
	},
	methods: {
		zipStr(e) {
			return utils.zipStr(e)
		},
		loadDefData() {
			console.log('初始化');
		},
		designLayout() {
			console.log('计算窗口布局');
			// 计算窗口高度
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.selfScrollBlock').boundingClientRect();
				query.exec((res) => {
					this.topH = this.sConf.iH - res[0].top - this.sConf.tH + 10;
				});
			})
		},
		loadSelfInfoRead(e) {
			let url = this.sConf.host + '/weapps/userinfo/' + e + '/'
			let token = this.sConf.token || ''
			utils.authenticatorOnRead(url, token).then((res) => {
				console.log('拉取个人信息__成功', res);
				if (e === this.sConf.auth.id) {
					this.staff = res
				} else {
					this.tmpData = res;
				}
			}).catch((e) => {
				console.log('拉取个人信息__失败', e);
			})
		},
		loadSelfExpersList(e) {
			let url = this.sConf.host + '/weapps/expers/'
			let token = this.sConf.token || ''
			let data = {
				sid: e,
				ordering: '-id'
			}
			utils.authenticatorOnList(url, token, data).then((res) => {
				console.log('拉取个人经验__成功', res);
				this.expData = res;
				this.initChart(res);
			}).catch((e) => {
				console.log('拉取个人经验__失败', e);
			})
		},
		initChart(e) {
			e.sort((a, b) => a.id - b.id)
			let cate = []
			let value = []
			e.forEach((item) => {
				cate.push(item.create.slice(5, 10))
				value.push((item.amount / 100 / 1000).toFixed(2))
			})
			let res = {
				categories: cate,
				series: [{
					name: "近期团队业绩(单位:k)",
					data: value
				}]
			};
			this.chartData = JSON.parse(JSON.stringify(res));
		},
		/**
		 * 关注好友
		 */
		addreStaff() {
			let url = this.sConf.host + '/weapps/friend/'
			let token = this.sConf.token || ''
			let data = {
				sid: this.sConf.auth.id,
				pyid: this.tmpData.id,
				status: 1
			}
			utils.authenticatorOnPost(url, token, data).then((res) => {
				console.log('关注用户成功', res);
				uni.showToast({
					icon: 'success',
					title: '关注用户成功'
				})
			}).catch((e) => {
				console.log('关注用户失败', e);
				uni.showToast({
					icon: 'error',
					title: '关注用户失败'
				})
			})
		},
		/**
		 * 绑定用户
		 */
		bindParent() {
			uni.showModal({
				title: '加入团队',
				content: '是否要加入该团队?',
				success: (res) => {
					if (res.confirm) {


						let url = this.sConf.host + '/weapps/bindHelp/'
						let token = this.sConf.token || ''
						let data = {
							parent: this.tmpData.id
						}
						utils.authenticatorOnPost(url, token, data).then((res) => {
							console.log('绑定用户成功', res);
							uni.showToast({
								icon: 'success',
								title: '绑定用户成功'
							})
						}).catch((e) => {
							console.log('绑定用户失败', e);
							uni.showToast({
								icon: 'error',
								title: '绑定用户失败'
							})
						})



					}
				}
			});

		}

	}
}
</script>

<style lang="scss" scoped>
/* 卡片网格样式 */
.card {
	background: white;
	border-radius: 10px;
	padding: 10px 20px;
	color: white;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 20px 1px rgba(0, 0, 0, 0.3);
}

.card::after {
	content: '';
	position: absolute;
	right: -30px;
	bottom: -30px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
}

.card.coral {
	background: linear-gradient(135deg, #ff7e5f, #feb47b);
}

.card.mint {
	background: linear-gradient(135deg, #00b09b, #96c93d);
}

.card.berry {
	background: linear-gradient(135deg, #ff4081, #7b1fa2);
}
</style>